<!--html页面---->
<template>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
</template>

<!--js或ts-->
<script setup lang="ts" name="toref and torefs">
    import { reactive,toRefs } from 'vue';
    //数据
    let person = reactive({name:'张三',age:18})
    //let {name,age} = person
    //底层相当于是 let name = person.name 和 let age = person.age
    //虽然person.name person.age是响应式数据 
    //但是赋值后的name age不是响应式数据
    //所以
    // function changeName(){
    //     name = 'lisi'
    // }
    // function changeAge(){
    //     age += 1
    // }
    //若把按钮事件绑定为以上两个函数，则按钮点击不生效，
    // 因为name和age不是响应式数据


    let {name,age} = toRefs (person)
    //相当于
    //ref(name) = person.name
    //ref(age) = person.age
    //或者是
    // ref(name) = toRef(person,'name')
    // ref(age) = toRef(person,'age')
    // 所以let {name,age}这个对象也是响应式的 
    // 且这个对象里的值和person对象里值一一对应 改一个另一个也会跟着改
    // let n1 = toref(person.name)只是ref(name) = toRef(person,'name')
    //只把person里的name 和name一一对应 一个改另一个跟着改
// //方法
    function changeName(){
        name.value = 'lisi'
    }
    function changeAge(){
        age.value += 1
    }

</script>

<!--css-->
<style>

</style>